<html>
<head>
  <title>OmniParser Playground</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script type="text/javascript" language="javascript">
    const doTransform = async () => {
      $('textarea#outputText').val("");
      let req = JSON.stringify({schema: $('textarea#schemaText').val(), input: $('textarea#inputText').val()});
      const resp = await fetch('/transform', {
        method: 'POST',
        body: req,
        headers: {
          'Content-Type': 'application/json'
        }
      });
      $('textarea#outputText').val(await resp.text());
    }
    var samples;
    const populateSampleDropdown = async () => {
      $('#sampleDropdownMenu').children().remove();
      const resp = await fetch('/samples', {method: 'GET'});
      samples = JSON.parse(await resp.text());
      for(let i = 0; i < samples.length; i++){
        $('#sampleDropdownMenu').append(
          `<a class="dropdown-item" onclick="sampleSelected(` + i + `)">` + samples[i].name + `</a>`);
      }
    }
    const doClear = () => {
      $('textarea#schemaText').val("");
      $('textarea#inputText').val("");
      $('textarea#outputText').val("");
    }
    const sampleSelected = (index) => {
      $('textarea#schemaText').val(samples[index].schema);
      $('textarea#inputText').val(samples[index].input);
      $('textarea#outputText').val("");
    }
    const populateBuildInfo = async () => {
      const resp = await fetch('/version', {method: 'GET'});
      var ver = JSON.parse(await resp.text());
      $('#buildInfo').text("(" + "build commit: " + ver["BuildSHA"] + ", build time: " + ver["BuildTime"] + ")");
    }
    $(document).ready(function (){
      populateBuildInfo();
    });
  </script>
</head>
<body>
  <div class="jumbotron p-3">
    <div class="container">
      <h4>OmniParser Playground</h4>
      <div id="buildInfo"></div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="d-flex flex-lg-row">
          <label>Enter schema/input below or try a sample:&nbsp;</label>
          <div class="dropdown" id="sampleDropdown">
            <button class="dropdown-toggle" data-toggle="dropdown" onclick="populateSampleDropdown()">
              select a sample
            </button>
            <div class="dropdown-menu" id="sampleDropdownMenu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="col">
          <label><h5>Schema:</h5></label>
          <textarea class="form-control" id="schemaText" rows="10"></textarea>
        </div>
        <div class="col">
          <label><h5>Input:</h5></label>
          <textarea class="form-control" id="inputText" rows="10"></textarea>
        </div>
    </div>
    <div class="row py-4">
      <div class="col">
        <div class="d-flex flex-lg-row">
          <button type="button" class="btn btn-light" onclick="doClear()">Clear</button>&nbsp;&nbsp;
          <button type="button" class="btn btn-primary" onclick="doTransform()">Transform >></button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <label><h5>Output:</h5></label>
        <textarea class="form-control" id="outputText" rows="20" readonly></textarea>
      </div>
    </div>
  </div>
</body>
</html>
